<template>
  <div id="container">
    <div class="header">
      <div class="backhome">
        <router-link to="/">返回首页</router-link>
      </div>
    </div>
    <div id="plans-wrapper"></div>
  </div>
</template>

<script>
export default {
  name: 'Transfer',
  data () {
    return {
      startKeyword: '',
      endKeyword: '',
      plans: []
    }
  },
  mounted () {
    this.startKeyword = this.$route.query.startKeyword,
    this.endKeyword = this.$route.query.endKeyword
    this.initTransfer()
  },
  methods: {
    initTransfer () {
      const that = this
      AMap.plugin('AMap.Transfer', () => {
        const transfer = new AMap.Transfer({
          city: '桂林',
          nightflag: true,
          panel: 'plans-wrapper'
        })
        transfer.search([{ keyword: that.startKeyword }, { keyword: that.endKeyword }], (status, result) => {
          if ( status === 'complete' && result.info === 'OK') {
            that.plans = result.plans
          } else {
            that.plans = []
          }
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header
    height: 40px
    background-color: #0075ff
    padding: 10px 20px
    .backhome
      font-size: 15px
      a
        color: #fff
</style>
